<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="core" %>
<%@ taglib prefix="fmt" uri="fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<title>剪裁头像</title>  
  
<script src="<%=path%>/page/front/disc/js/jquery-1.8.3.min.js"></script> 
<script src="<%=path%>/page/front/disc/js/jquery-migrate-1.2.1.min.js"></script>  
<script src="<%=path%>/page/front/disc/js/jquery.Jcrop.min.js"></script>  
<link rel="stylesheet" href="<%=path%>/page/front/disc/css/jquery.Jcrop.css" type="text/css" />  
<script type="text/javascript">  
  jQuery(document).ready(function($){  
  
    // Create variables (in this scope) to hold the API and image size  
    var jcrop_api,  
        boundx,  
        boundy,  
  
        // Grab some information about the preview pane  
        $preview = $('#preview-pane'),  
        $pcnt = $('#preview-pane .preview-container'),  
        $pimg = $('#preview-pane .preview-container img'),  
  
        xsize = $pcnt.width(),  
        ysize = $pcnt.height();  
      
    console.log('init',[xsize,ysize]);  
    $('#user_preview_img').Jcrop({  
      onChange: updatePreview,  
      onSelect: updatePreview,  
      aspectRatio: xsize / ysize  
    },function(){  
      // Use the API to get the real image size  
      var bounds = this.getBounds();  
      boundx = bounds[0];  
      boundy = bounds[1];  
      // Store the API in the jcrop_api variable  
      jcrop_api = this;  
  
      // Move the preview into the jcrop container for css positioning  
      $preview.appendTo(jcrop_api.ui.holder);  
    });  
  
    function updatePreview(c)  
    {  
      if (parseInt(c.w) > 0)  
      {  
        var rx = xsize / c.w;  
        var ry = ysize / c.h;  
  
        $pimg.css({  
          width: Math.round(rx * boundx) + 'px',  
          height: Math.round(ry * boundy) + 'px',  
          marginLeft: '-' + Math.round(rx * c.x) + 'px',  
          marginTop: '-' + Math.round(ry * c.y) + 'px'  
        });  
      }  
      showCoords(c);
    }; 
    function showCoords(c)  
    {  
        jQuery('#x1').val(c.x);  
        jQuery('#y1').val(c.y);  
        jQuery('#x2').val(c.x2);  
        jQuery('#y2').val(c.y2);  
        jQuery('#w').val(c.w);  
        jQuery('#h').val(c.h);  
    };
    
    $( function() {                  
        $("#demoImage").Jcrop({  
                    aspectRatio: 1,             //选中区域宽高比为1，即选中区域为正方形       
                    bgColor:"#ccc",             //裁剪时背景颜色设为灰色  
                    bgOpacity:0.1,              //透明度设为0.1  
                    allowResize:false,          //不允许改变选中区域的大小  
                    setSelect:[0,0,100,100]     //初始化选中区域  
              }  
         	);          
    	}  
	);  
  $("button#submit").click(function(c){
	 var obj={
		"uId":$("#uId").val(),
		"x1":$("#x1").val(),
	 	"y1":$("#y1").val(),
	 	"w":$("#w").val(),
	 	"h":$("#h").val()
	 };
	 $.post("editnow.json",obj,function(status){
		 if(status==1){
			 alert("修改成功！");
			 location.href="../"+$("#uId").val()+".html";
		 }else{
			 alert("修改失败！");
		 }
	 });
  	
  });
  
  
  });  
  
 
</script>  
  
  
<style type="text/css">  
/* Apply these styles only when #preview-pane has 
   been placed within the Jcrop widget */  
.jcrop-holder #preview-pane {  
  display: block;  
  position: absolute;  
  z-index: 2000;  
  top: 10px;  
  right: -280px;  
  padding: 6px;  
  border: 1px rgba(0,0,0,.4) solid;  
  background-color: white;  
  
  -webkit-border-radius: 6px;  
  -moz-border-radius: 6px;  
  border-radius: 6px;  
  
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
}  
  
/* The Javascript code will set the aspect ratio of the crop 
   area based on the size of the thumbnail preview, 
   specified here */  
#preview-pane .preview-container {  
  width: 250px;  
  height: 170px;  
  overflow: hidden;  
}  

</style>  
  
</head>  
<body>  
   <div>
   <img  alt="" src="../../page/upload/images/${one.image.imLoclhost}" id="user_preview_img"></div>  
      
   <div id="preview-pane">  
    <div class="preview-container">  
  
      <img src="../../page/upload/images/${one.image.imLoclhost}" class="jcrop-preview" alt="Preview" />  
    </div>  
  </div>  
  <form >  
  			<input id ="uId" name="uId" type="hidden" value="${one.uId }">
            <input   id="x1" name="x1" type="hidden"/> 
            <input   id="y1" name="y1" type="hidden" />
            <input  id="x2" name="x2" type="hidden"/>  
            <input  id="y2" name="y2" type="hidden"/>  
            <input  id="w" name="w" type="hidden"/> 
            <input  id="h" name="h" type="hidden"/>  
        	<button type="button" id="submit">提交</button>
        </form>  
</body>  
</html>  